<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css">
<link rel="stylesheet" href="<%=path%>/css/global.css">
<script type="text/javascript" src="<%=path %>/plugins/jquery.min.js"></script>
<script src="<%=path%>/plugins/layui/layui.js"></script>
<script type="text/javascript" src="<%=path%>/js/core/helper.js"></script>
<div style="padding-right: 10px;padding-left: 10px">
    <form id="form" class="layui-form layui-form-pane" action="" style="margin-top: 10px">
        <div class="layui-form-item">
            <label class="layui-form-label">资源类型</label>
            <div class="layui-input-inline" style="float:left;">
                <select name="type_code" id="type_code" lay-filter="type_code">
                    <option value="-1" selected="selected">无</option>
                    <c:forEach var="root" items="${roots}">
                        <option value="${root.type_code}">${root.type_name}</option>
                    </c:forEach>
                </select>

            </div>
            <div style="color:red;">
                <strong style="color:blue;">Tips：</strong> 默认分配全部资源，如果有不需要的请去掉勾选。
            </div>
        </div>

        <div class="table-responsive">
            <table class="layui-table"
                   style="table-layout: fixed; word-wrap: break-word;" cellpadding="0"
                   cellspacing="0">
                <colgroup>
                    <col width="250">
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>图片</th>
                    <th>标题</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" onclick="addResource()">确定添加</button>
        <div id="page" style="float:right;margin-right:1px;"></div>
    </form>
</div>
<SCRIPT language="javascript">
    var form;
    //去掉资源列表
    var removeResources = [];
    layui.use(['layer', 'form', 'upload', 'laypage'], function () {
        form = layui.form();
        form.on('select(type_code)', function (data) {
            if ('-1' === data.value) {
                queryResourceList('appContent');
            } else {
                queryResourceList(data.value);
            }
        });

        //监听checkbox
        form.on('checkbox(selectRemoveResource)', function (data) {
            var resourceId = data.value;
            if (data.elem.checked == false) {
                removeResources.push(resourceId);
            } else {
                var j = -1;
                for (var i in removeResources) {
                    if (removeResources[i] == resourceId) {
                        j = i;
                        break;
                    }
                }
                if (j != -1) {
                    removeResources.splice(j, 1);
                }
            }
        });
        queryResourceList('appContent');
    });
    var modelParam = {};
    modelParam.pageSize = 3;
    function queryResourceList(typeCode) {
        var param = {};
        param.type_code = typeCode;
        param.isDefQueryResource = true;
        param.includeSub = true;
        param.isApproved = 'Y';
        param.type_name = $('#type_name').val();
        param.pageSize = modelParam.pageSize;
        param.page = 1;

        postJson("<%=path%>/cms/resource/queryResourceList.x", $.param(param), function (ret) {
            var data = ret.data;
            $('#tbody').empty();
            render(data.list);
            layui.laypage({
                cont: 'page'
                , pages: Math.ceil(data.size / modelParam.pageSize)
                , jump: function (row, first) {
                    if (!first) {
                        param.page = row.curr;
                        queryPage(param);
                    }
                }
            });
        });
    }

    function queryPage(param) {
        postJson("<%=path%>/cms/resource/queryResourceList.x", $.param(param), function (ret) {
            $('#tbody').empty();
            render(ret.data.list);
        });
    }

    function render(list) {
        modelParam.list = list;
        for (var i in list) {
            var row = list[i];
            var checked = 'checked=checked';
            for (var j in removeResources) {
                if (row.resource_id == removeResources[j]) {
                    checked = '';
                    break;
                }
            }
            $('#tbody').append(
                '<tr>' +
                '<td><div class="center" style="width: 210px;height: 120px; margin-bottom: 8px; border:1px solid #fde7e5; padding: 2px">' +
                '<img id="icon_url" src=" ' + row.icon_url + ' " style=" max-height: 100%; max-width: 100%;" />' +
                '</div>' +
                '</td>' +
                '<td>' + row.title + '</td>' +
                '<td>' + row.description + '</td>' +
                '<td><input type="checkbox" name="selectRemoveResource"  lay-filter="selectRemoveResource" ' + checked + ' value="' + row.resource_id + '"></td>' +
                '</tr>'
            );
        }
        form.render();
    }

    function addResource() {
        parent.addFunctionPerms(modelParam.list[i], 1);
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</SCRIPT>
